@import './variable.scss';

/*video样式*/
.video-box {
  height: 100%;
  width: 100%;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -ms-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  position: relative;
  // z-index: 0;
}

.video-box-body {
  // height: calc(100% - #{px(1)});
  // width: calc(100% - #{px(1)});
  width: 100%;
  height: 100%;
  // z-index: 0;
  object-fit: fill;
}

/*控制条样式*/
.video-control {
  width: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.control-btn {
  cursor: pointer;
  text-align: center;

  .title,
  .svg-icon {
    color: #fff;
  }
}

.medium {
  height: px(30);

  .control-btn {
    width: px(40);

    .svg-icon {
      width: px(18);
      height: px(18);
    }

    .title {
      font-size: px(14);
    }

    .multi-screen-img {
      height: px(20);
      width: px(20);
      display: block;
      margin: 0 auto;
    }
  }

  .ratio-1080P {
    width: px(45);
  }
}

.small {
  height: px(25);

  .control-btn {
    width: px(25);

    .svg-icon {
      width: px(15);
      height: px(15);
    }
  }
}